import { useEffect, useState } from "react";
import { useMount,useArray } from "../../utils";

interface PersonProp{
    name:string,
    age:number
}

export const TsTestDemo = ()=>{
    const person:PersonProp[] = [
        {name:"jack",age:17},
        {name:"ma",age:18},
    ];

    const {value,clear,removeIndex,add} = useArray(person);

    useMount(()=>{
        // console.log(value.notExist);
        
        // add({name:"david"});

        // removeIndex('123');
    })

    return (
        <div>
            <button onClick={()=>add({name:"john",age:22})}>add john</button>
            <button onClick={()=>removeIndex(0)}>点击删除第一项</button>
            <button onClick={()=>clear()}>clear</button>
            {console.log("value:",value)}
            {
                value.map((p:PersonProp,index:number)=>(
                    <div key={index}>
                        <span>{index}</span>
                        <span>{p.name}</span>
                        <span>{p.age}</span>
                    </div>
                ))
            }
        </div>
    )
}
